<template>
  <div>
    <div class="flex recommend_form">
      <crop-upload show-type="photo" accept=".png" :init-val="formData.goods_img" wrapper-width="90px" wrapper-height="90px" :img-width="500" :img-height="500" @setVal="(val) => { formData.goods_img = val }" />
      <div class="flex-1 input_wrapper">
        <div class="flex name">
          <label class="flex align-center justify-center"><span class="required-icon">*</span>名称</label>
          <el-input v-model="formData.goods_name" type="text" placeholder="最多展示10个字段" maxlength="20" />
        </div>
        <div v-if="showSubtitle" class="flex price">
          <label class="flex align-center justify-center">标语</label>
          <el-input v-model="formData.goods_title" type="text" placeholder="请输入每天租赁价格" maxlength="20" />
        </div>
      </div>
    </div>
    <goods-link v-if="formData.goodsData" ref="goodsLink" :goods-data="formData.goodsData" :show-sort="false" :show-tool="showTool" @handleDelete="deleteGoods" />
    <div v-else-if="showTool" class="add-div" @click="openSelect">
      <i class="el-icon-plus" />选择商品链接
    </div>
    <goods-dialog ref="goodsDialog" dialog-width="1340px" :page-size="12" :show-type-select="true" :show-checked-tool="showCheckedTool" @setSelect="setSelect" />
  </div>
</template>

<script>
import goodsLink from '../compoments/goodsLink'
import goodsDialog from '@/components/goodsDialog.vue'
import cropUpload from '@/components/cropUpload'
export default {
  components: { goodsLink, goodsDialog, cropUpload },
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    showSubtitle: {
      type: Boolean,
      default: true
    },
    showTool: {
      type: Boolean,
      default: true
    },
    showCheckedTool: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goodsData: null
    }
  },
  methods: {
    // 删除商品链接
    deleteGoods() {
      this.$set(this.formData, 'goods_id', null)
      this.$set(this.formData, 'goodsData', null)
    },
    // 设置选中的商品
    setSelect(goodsList) {
      this.$set(this.formData, 'goods_id', goodsList[0].goods_id)
      this.$set(this.formData, 'goodsData', goodsList[0])
    },
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend_form {
  margin-bottom: 10px;
}
</style>
